<template>
  <div>
    <div style="padding: 15px 10px; display: flex">
      <a-dropdown :trigger="['click']">
        <a class="select"> {{ choose }} <a-icon type="down" /> </a>
        <a-menu slot="overlay" class="dropdownList" @click="textChange">
          <a-menu-item key="camera-01"> camera-01 </a-menu-item>
          <a-menu-item key="camera-02"> camera-02 </a-menu-item>
          <a-menu-item key="0"> 重置 </a-menu-item>
        </a-menu>
      </a-dropdown>
      <el-input
        placeholder="输入设备编号进行搜索"
        suffix-icon="el-icon-search"
        v-model="input1"
        class="sousuo"
      >
      </el-input>
      <el-switch
        style="display: block; margin-top: 5px"
        v-model="value"
        active-color="#1af7ff"
        inactive-color="#ffffff"
        inactive-text="循环播放"
      >
      </el-switch>
    </div>
    <el-carousel
      :interval="30000"
      indicator-position="none"
      :autoplay="value"
      height="180px"
    >
      <el-carousel-item
        v-for="item in parseInt(this.src.length / 4) + 1"
        :key="item"
      >
        <div class="carousel">
          <div v-for="count in 4" :key="count">
            <div v-if="count + (item - 1) * 4 <= src.length">
              <div class="tui">
                <div class="wai">
                  <span style="font-size: 10px">{{ cdata[count - 1] }}</span
                  ><span style="margin-left: 30px">{{ SF[count - 1] }}</span>
                  <a-icon type="ellipsis" class="icon" /><a-icon
                    type="reload"
                    class="icon"
                  /><a-icon type="camera" class="icon" />
                </div>
                <div class="grid-content bg-purple" style="z-index: 1">
                  <camera  :url="src[count-1]"></camera>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="wu">
                <img src="../..\assets\image\设备未连接.png" />
                <p>未连接设备</p>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import camera from "../Camera.vue";

export default {
  components: {
    camera,
  },
  data() {
    return {
      videos: [],
      input1: "",
      choose: "选择设备",
      value: true,
      cdata: ["camera_107", "camera_110", "camera_111"],
      SF: ["人员闯入", "脱岗", "蓝色制服"],
      srcyc: [
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-2",
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-3",
        "http://szls4a.chiefdata.net:8035/live?app=sjls&stream=stream-4",
      ],
      src: [
        "http://192.168.8.208:8035/live?app=sjls&stream=av-123",
        "http://192.168.8.208:8035/live?app=sjls&stream=stream-3",
        "http://192.168.8.208:8035/live?app=sjls&stream=stream-4",
      ],
    };
  },
  mounted() {
   
  },
  methods: {
    textChange(e) {
      if (e.key == 0) {
        this.choose = "选择设备";
      } else {
        this.choose = e.key;
      }
    },
    Swichange() {
      this.autoplay = this.value;
    },
   
  },
};
</script>
<style lang="less" scoped>
.videodiv {
  padding: 5px 10px 10px 10px;
  width: 100%;
}
.el-row {
  margin-bottom: 12px;
}

.select {
  border: 1px solid#ffffff;
  height: 30px;
  padding: 3px 10px;
  font-size: 16px;
  color: #ffffff;
}
.select:hover {
  color: #1af7ff;
}
.select:active {
  color: #40a9ff;
}

input[type="text"] {
  width: 214px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 15px;
  font-size: 16px;
  padding-left: 15px;
  margin: 0 20px;
  background-color: transparent;
}
/deep/ .el-switch__core:after {
  background-color: #000;
}

/* 隐藏播放、暂停等各类播放器功能按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls-current-time-display {
  display: none;
}
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
video::-webkit-media-controls-volume-slider {
  display: none;
}
video::-webkit-media-controls-enclosure {
  display: none;
}

/* 视频全铺 */
video {
  object-fit: fill;
}

.icon {
  color: #ffffff;
  float: right;
  margin-right: 10px;
  font-size: 15px;
}
.wai {
  z-index: 8;
  position: absolute;
  background-color: rgba(3, 7, 20, 0.5);
  color: #ffffff;
  height: 30px;
  width: 100%;
  font-size: 10px;
  padding-top: 7px;
  text-align: left;
  padding-left: 20px;
}

.tui {
  position: relative;
  width: 274px;
  height: 155px;
  margin: 10px 0px;
}
.wu {
  background-color: #142766;
  height: 155px;
  margin: 10px 0px;
  width: 274px;
}
.wu p {
  color: #ffffff;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 50px;
}
.wu img {
  margin-top: 40px;
}
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}
.ant-dropdown-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.25);
}
/deep/.el-switch__label {
  color: #ffffff;
}
/deep/.el-input__inner {
  background-color: transparent;
  border-radius: 15px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  height: 30px;
  &::placeholder {
    color: #ffffff;
    font-size: 14px;
  }
}
/deep/.el-input__suffix {
  top: -5px;
  height: 100%;
  color: #fff;
}
.sousuo {
  width: 200px;
  margin: 0 10px;
}
.dropdownList {
  background-color: #142766;
  border: 1px solid #3c6fd2;
  border-radius: 0px;
}
.carousel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 20px;
}
</style>


